<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="130px" class="demo-ruleForm">

                <el-form-item label="专题头图" prop="headUrl">
                  <my-upload-file v-model='ruleForm.headUrl' :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="专题名称" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="艺术家昵称" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="关联地标" prop="arLandmarkId">
                  <landmark-select :type="3" v-model="ruleForm.arLandmarkId" :defaultTxt="defaultTxt" width='400px' :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item>
                    <template>
                        <template v-if="onlyLook==1">
                            <my-back type="info">返回</my-back>
                            <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="handleSave('ruleForm')">保存</el-button>
                            <my-back icon="el-icon-close">取消</my-back>
                        </template>
                    </template>
                </el-form-item>
            </el-form>
        </mian-layout>
</template>

<script>
import {
  add_meetar_data,
  get_meetar_details,
  edit_meetar_data
} from '@/api/arApi'
import myUploadFile from '@/components/public/myUploadFile.vue'
import landmarkSelect from "@/components/public/landmarkSelect.vue";
import {mergeObject} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
export default {
  name: '',
  components:{
    myUploadFile,
    landmarkSelect,
    myBack
  },
  data() {
    return {
      id:'',
      onlyLook:'', //1为仅查看，2位修改
      ruleForm: {
        headUrl:'',
        name:'',
        arLandmarkId:''
      },
      defaultTxt:'',
      btnLoading:false
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const dtData = JSON.parse(sessionStorage.getItem('details')) 
      this.ruleForm = mergeObject(this.ruleForm,dtData)
      this.defaultTxt = dtData.arLandmarkName
      // const res = await get_meetar_details(this.id)
      // console.log("tttt:",res)
      // if(res.success){
      //   this.ruleForm = mergeObject(this.ruleForm,res.data)
      // }
    }
  },
  methods: {
    // 确定
    handleSave(formName) {
   
          if(!this.ruleForm.headUrl){
            return this.$message.warning('请上传专题头图')
          }else if(!this.ruleForm.name){
            return this.$message.warning('请输入专题名称')
          }else if(!this.ruleForm.arLandmarkId){
            return this.$message.warning('请选择关联地标')
          }
          //this.btnLoading = true
          if(this.id){
            edit_meetar_data({arArtistId:this.id,...this.ruleForm}).then(res=>{
                if(res.success){
                  this.$message.success('修改成功！')
                  this.$store.dispatch('tagsView/myClosePageTab',this.$route)
                 // this.$router.back()
                }else{
                  //this.$message.error("修改失败")
                }
                this.btnLoading = false
            })
          }else{
            add_meetar_data(this.ruleForm).then(res=>{
              if(res.success){
                this.$message.success('新增成功！')
                this.$store.dispatch('tagsView/myClosePageTab',this.$route)
               // this.$router.back()
              }else{
                //this.$message.error("新增失败")
              }
              this.btnLoading = false
            })
          }
          
   
    },
  }
}
</script>

<style lang="scss" scoped>
  .uploadimgbox{
    display: flex;
    .upItem{
      p{
        color: #999;
      }
      &+.upItem{
        margin: 0 0 0 103px;
      }
    }
  }
</style>


